<!--
 * @Description: 
 * @Author: charles
 * @Date: 2020-11-03 15:55:55
 * @LastEditors: charles
 * @LastEditTime: 2021-08-01 14:07:09
-->
<template>
   <div class="apply">
      <!-- {{details}} -->
      <div class="wrapper">

         <!-- 标题开始 -->
         <h2>{{details.name}}</h2>
         <!-- 标题结束 -->

         <!-- 项目信息开始 -->
         <p>项目费用：{{details.projectMoney}} 元</p>
         <p>起止时间： {{details.beginTime|formatDate}}~ {{details.endTime}}</p>
         <p>项目介绍： {{details.introduce}}</p>
         <!-- 项目信息结束 -->

         <!-- 步骤条开始 -->
         <el-steps :active="1" align-center>
         <el-step title="申请报名" description="用户选择自己喜欢的项目进行报名"></el-step>
         <el-step title="管理员确认" description="管理员确认用户报名，为用户开放账号"></el-step>
         <el-step title="用户付款" description="用户登录后可以进行确认，完成付款"></el-step>
         <el-step title="报名完成" description="报名接受后等待管理员线下通知"></el-step>
         </el-steps>
         <!-- 步骤条结束 -->

         <!-- 表单开始 -->
         <div class="form">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="姓名" prop="name">
               <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>

            <el-form-item label="手机号" prop="telephone">
               <el-input v-model="ruleForm.telephone"></el-input>
            </el-form-item>

            <el-form-item label="性别">
               <el-radio-group v-model="ruleForm.gender">
                  <el-radio label="男"></el-radio>
                  <el-radio label="女"></el-radio>
               </el-radio-group>
            </el-form-item>

            <el-form-item label="出生日期">
               <el-col :span="11">
                  <el-form-item prop="date1">
                  <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.birth" style="width: 100%;"></el-date-picker>
                  </el-form-item>
               </el-col>
            </el-form-item>

             <el-form-item label="地址">
               <el-input v-model="ruleForm.address"></el-input>
            </el-form-item>

            <el-form-item>
               <el-button type="primary" @click="submitForm('ruleForm')">确认报名</el-button>
            </el-form-item>
            </el-form>
         </div>
         <!-- 表单结束 -->
      </div>
   </div>
</template>

<script>
import {get,post} from '../utils/request'
import moment from 'moment'
export default{
   data(){
    return{
      ruleForm:{},
      details:null,
      rules:{
         name: [
            { required: true, message: '请输入姓名', trigger: 'blur' },
          ],
         telephone:[
             { required: true, message: '请输入手机号', trigger: 'blur' },
         ]
      }
    } 
   },
   methods:{
      //通过项目id查询项目的详细信息
      findDetailsById(){
         //数据交互
         get('/index/project/findById?id='+this.$route.query.id).then(res=>{
            console.log(res,'********************************');
            if(res.status==200){
               this.details=res.data 
            }else{
                  this.$message({
                     type:'error',
                     message:res.message
                  })
               }
         })
      },
      //提交报名信息
      submiForm(){
         //将标准事件转化为时间戳
         this.ruleForm.birth=moment(this.ruleForm.birth).format('x')
      
      //获取项目的id值
      this.ruleForm.projectId = this.$route.query.id
         console.log(this.ruleForm);
         post('/index/apply/saveOrUpdate',this.ruleForm).then(res=>{
            if(res.status == 200){
               this.$message({
                  type:'success',
                  message:res.message
            })
        }else {
          this.$message({
            type:'error',
            message:res.message
          })
        }

         })
      }
   },

   created(){
      this.findDetailsById()
   }
}
</script>



<style scoped lang='scss'>
.wrapper{
   width: 980px;

   h2{
      text-align: center;
   }
}
</style>

